<template>
  <!-- 右侧栏 浏览排行 -->
  <div id="rank" v-if="articles.length > 0">
    <el-divider content-position="left">浏览排名</el-divider>

    <div v-for="(item,index) in articles" :key="item.id" class="rank-item">
      <el-link :underline="false" class="title" @click="showDetail(item.id)" v-if="index < 3">
        <span class="text-hot-1">{{index +1}}</span>{{ item.title }}
      </el-link>
      <el-link :underline="false" class="title" @click="showDetail(item.id)" v-if="index >= 3 && index < 6">
        <span class="text-hot-2">{{index +1}}</span>{{ item.title }}
      </el-link>

      <el-link :underline="false" class="title" @click="showDetail(item.id)" v-if="index >= 6 && index <10">
        <span class="text-hot-3">{{index +1}}</span>{{ item.title }}
      </el-link>
    </div>
  </div>
  <div v-else>
    <el-empty description="暂无数据"></el-empty>
  </div>
</template>

<script>
import {
    articleQueryScanRankList
} from '@/api/article'

export default {
    name: 'rank',
    data () {
        return {
            articles: []
        }
    },
    filters: {
        formatTimer: function (value) {
            let date = new Date(value)
            let year = date.getFullYear()

            let month = date.getMonth() + 1
            month = month < 10 ? '0' + month : month

            let day = date.getDate()
            day = day < 10 ? '0' + day : day

            let hour = date.getHours()
            hour = hour < 10 ? '0' + hour : hour

            let minute = date.getMinutes()
            minute = minute < 10 ? '0' + minute : minute

            let second = date.getSeconds()
            second = second < 10 ? '0' + second : second

            console.log(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second)
            return year + '-' + month + '-' + day
        }
    },
    methods: {
        showDetail (articleId) {
            this.$router.push({
                path: 'articleDetail',
                query: {
                    'articleId': articleId
                }
            })
        }
    },
    mounted () {
        articleQueryScanRankList({
            limit: 10
        }).then((response) => {
            if (response && response.code === 200) {
                this.articles = response.data
            }
        })
    }
}
</script>

<style scoped>
#rank {
  width: auto;
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 5px;
  background-color: #fff;
}

.top-nav {
  width: 100%;
  height: 30px;
  background-color: #333;
  line-height: 30px;
}

.rank-item {
  margin: 0px 0px 5px 0px;
  padding: 0px 5px 0px 5px;
  width: auto;
}

.title {
  font-size: 14px;
  font-family: '微软雅黑';
  font: bold;
  height: 30px;
  line-height: 30px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  background-color: #f6f6f6;
}

/* 特殊标识 */
.text-hot-1 {
  background-color: rgb(244, 15, 15);
  color: black;
  display: inline-block;
  padding: 0 0px;
  text-align: center;
  vertical-align: middle;
  font-style: normal;
  overflow: hidden;
  line-height: 18px;
  height: 18px;
  width: 18px;
  font-size: 12px;
  font-weight: 200;
  margin-left: 6px;
  margin-right: 10px;
}

.text-hot-2 {
  background-color: rgb(218, 129, 69);
  color: black;
  display: inline-block;
  padding: 0 0px;
  text-align: center;
  vertical-align: middle;
  font-style: normal;
  overflow: hidden;
  line-height: 18px;
  height: 18px;
  width: 18px;
  font-size: 12px;
  font-weight: 200;
  margin-left: 6px;
  margin-right: 10px;
}

.text-hot-3 {
  background-color: rgb(39, 203, 244);
  color: black;
  display: inline-block;
  padding: 0 0px;
  text-align: center;
  vertical-align: middle;
  font-style: normal;
  overflow: hidden;
  line-height: 18px;
  height: 18px;
  width: 18px;
  font-size: 12px;
  font-weight: 200;
  margin-left: 6px;
  margin-right: 10px;
}
</style>
